<template>
  <div class="mui-numbox" data-numbox-min="1" data-numbox-max="100">
    <button class="mui-btn mui-btn-numbox-minus" @click="num-=1">-</button>
    <input id="test" class="mui-input-numbox" type="number"
    v-model="num"/>
    <button class="mui-btn mui-btn-numbox-plus" @click="num+=1">+</button>
  </div>
</template>

<script>
export default {
  props: ['id', 'count'],
  data() {
    return {
      num: this.$props.count

    }
  },
  methods: {},
  watch:{
    num(newVal, oldVal){
      this.$store.commit('shopcart/countChanged', {
        id: this.$props.id,
        newCount: newVal,
        })
    }
  }
}
</script>

<style>
</style>
